$blue_color : #00b0f0;
$blue_hover_color : #08aae5;

$green_color : #00d1b2;
$green_hover_color : #18c2a9;

$orange_color : #f4b976;
$orange_hover_color : #e9ae6a;

$pink_color : #f39894;
$pink_hover_color : #d77672;

$cyan_color : #26b6be;
$cyan_hover_color : #1facb4;

// 颜色会变化的地方有 header.vue中的header的背景颜色
// eventadd.vue里面的button的bg eventlist里面的div.tab
// sidebar里面按钮的bg
@mixin theme($bg, $bg_hover) {
  // header.vue
  .header {
    background-color: $bg;
  }

  // eventadd.vue 
  .add {
    input {
      &:focus {
        border-color: $bg;
      }
    }

    button {
      background-color: $bg;
    }
  }

  //sidebar.vue
  .tools {
    .tools-btn {
      background-color: $bg;
      border: 1px solid $bg;
      &:hover {
        background-color: $bg_hover;
      }
    }
  }

  // eventlist.vue
  .list {

    .tab {
      background-color: $bg;
    }

    .box {

      button {
        &:hover {
          border: 1px solid $bg;
          color: $bg;
        }
        
      }
    }
  }

  // dialog.vue
  .dialog {

    .dialog-wrapper {
      .dialog-btns {
        .sure-btn {
          background: $bg;
        }
  
      }
    }
    
  }

  // event_table.vue
  .event-all {
    .table-box {
      .event-table {
        button {
          background: $bg;
        }
      }
      
      .input-box {
        button {
          background: $bg;
        }
      }
    }
  }
}

// 蓝色主题
.blue {
  @include theme(#{$blue_color}, #{$blue_hover_color})
}

// 绿色主题
.green {
  @include theme(#{$green_color}, #{$green_hover_color})
}

// 黄色主题
.orange{
  @include theme(#{$orange_color},#{$orange_hover_color})
}

// 粉色主题
.pink{
  @include theme(#{$pink_color},#{$pink_hover_color})
}

// 青蓝色主题
.cyan{
  @include theme(#{$cyan_color},#{$cyan_hover_color})
}